<template>
  <!-- 接收 src 属性：指渲染的图片地址 -->
  <el-image :src="src" class="img-container">
    <!-- 当 el-image 组件接收的 src 地址渲染失败，或者不存在图片时，会走 error -->
    <template slot="error" class="image-slot">
      <!-- 若解析失败，地址不存在，渲染默认的图片 -->
      <!-- 图片采用就近原则，直接从当前目录下引用即可，为了以后方便直接复用 二次封装的该组件 -->
      <img src="./世錡.png" alt="">
    </template>
  </el-image>
</template>

<script>
export default {
  name: 'ImageHolder',
  // 定义使用时从父组件传过来的动态 src 值
  props: {
    src: {
      type: String,
      default: ''
    }
  }

}
</script>

<style scoped lang="scss">
.img-container {
  border-radius: 50%;

  img {
    width: 100%;
  }
}
</style>
